<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->

    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">

    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="../css/style.css">

    <!-- 引入组件库 -->

    <script src="../js/vue.js"></script>

    <script src="../element-ui/lib/index.js"></script>

    <script type="text/javascript" src="../js/jquery.min.js"></script>

    <script src="../js/axios-0.18.0.js"></script>


</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <h1><i class="el-icon-cloudy"></i>资源分享</h1>
        </el-header>
        <el-main >
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }"><a href="../index">首页</a></el-breadcrumb-item>
                <el-breadcrumb-item>资源分享</el-breadcrumb-item>
            </el-breadcrumb>
            <el-row :gutter="20">
                <el-col  >
                    <el-card>
                        <div slot="header" class="clearfix">
                            <span><i class="el-icon-upload"></i>文件上传</span>
                        </div>
                        <div >
                            <el-upload
                                    ref="upload"
                                    accept=".png,.jpg,.jpeg,.doc,.docx,.txt,.xls,.xlsx"
                                    action="#"
                                    multiple
                                    :limit="5"
                                    :headers="headers"
                                    :auto-upload="false"
                                    :file-list="fileList"
                                    :on-change="handleChange"
                                    :on-remove="removeFile"
                                    :on-exceed="limitCheck"
                            >
                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                <el-button style="margin-left: 10px;" size="small" type="success" @click="confirm()">上传到服务器</el-button>

                                <div slot="tip" class="el-upload__tip">
                                    <p>只支持.png / .jpg / .jpeg / .doc / .docx / .txt / .xls / .xlsx文件</p>
                                    <p>最多上传5个文件</p>
                                </div>
                            </el-upload>

                        </div>
                    </el-card>
                </el-col>
                <el-col  >
                    <el-card>
                        <div slot="header" class="clearfix">
                            <span><i class="el-icon-coin"></i>已有资源</span>
                        </div>
                        <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>

                            <el-table-column type="index" align="center" label="序号"></el-table-column>

                            <el-table-column prop="uid" label="上传用户" align="center"></el-table-column>

                            <el-table-column prop="filename" label="文件名" align="center"></el-table-column>

                            <el-table-column prop="fileaddress" label="文件地址" align="center"></el-table-column>


                            <el-table-column label="操作" align="center">

                                <template slot-scope="scope">

                                    <el-button type="primary" size="mini" @click="download(scope.row)">下载</el-button>

                                </template>

                            </el-table-column>

                        </el-table>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
    </el-container>


</div>



<!--<form action="/filePojo/save" method="post" enctype="multipart/form-data">-->
<!--    文件<input type="filePojo" name="filePojo"><br>-->
<!--    <input type="submit" value="提交"></input>-->

<!--</form>-->





<script>
    new Vue({
        el: "#app",
        data() {
            return {
                // 上传附件
                dataList: [],
                fileList: [],
                headers: {
                    'Content-Type': 'multipart/form-data'
                },
            }
        },
        created(){
            this.getAll();
        },
        methods: {
            // 文件状态改变时的钩子
            handleChange(file, fileList) { // 文件数量改变
                this.fileList = fileList
                const isLt2M = (file.size / 1024 / 1024 < 1)
                if (!isLt2M) {
                    this.$message.error('上传文件大小不能超过 1MB!')
                    this.fileList.pop()
                }
                return isLt2M
            },
            // 文件超出个数限制时的钩子
            limitCheck() {
                this.$message.warning('每次上传限制最多五个文件')
            },
            // 文件删除的钩子
            removeFile(file, fileList) {
                this.fileList = fileList
            },
            // 点击确定按钮 上传文件
            confirm() {
                var param = new FormData()
                this.fileList.forEach((val, index) => {
                    param.append('file', val.raw)
                })
            //     // 拿取上传用户的id
            //     param.append('id', sessionStorage.getItem('id'))
            // ...
                axios(`/file/save`, {
                    headers: {
                        //令牌验证
                        // 'Authorization': 'Bearer ' + sessionStorage.getItem('token'),

                        'Content-Type': 'multipart/form-data'
                    },
                    method: 'post',
                    data: param
                }).then((res) => {
                    console.log(res);
                    if (res.data.code === 200) {
                        this.$message.success('上传成功')
                    } else {
                        this.$message.error(res.data.msg)
                    }
                })
            },
            getAll(){
                axios.get(`/file/files`).then((res)=>{
                    // console.log(res.data)
                    this.dataList = res.data.data;
                });
            },
            download(row){

                window.open('/file/downLoad?fid=' + row.fid);


                // this.$confirm("确认下载该文件？","提示",{
                //     type:'info'
                // }).then(()=>{
                //     //2.做禁用业务
                //     axios.get(`/file/downLoad?fid=${row.fid}`).then((res)=>{
                //
                //         debugger
                //         console.log(res.status);
                //         if (res.status === 201) {
                //             const content = res.data
                //             const blob = new Blob([content])
                //             const fileName = file.name
                //             if ('download' in document.createElement('a')) { // 非IE下载
                //                 const elink = document.createElement('a')// 创建一个a标签通过a标签的点击事件区下载文件
                //                 elink.download = fileName
                //                 elink.style.display = 'none'
                //                 elink.href = URL.createObjectURL(blob)// 使用blob创建一个指向类型数组的URL
                //                 document.body.appendChild(elink)
                //                 elink.click()
                //                 URL.revokeObjectURL(elink.href) // 释放URL 对象
                //                 document.body.removeChild(elink)
                //             } else { // IE10+下载
                //                 navigator.msSaveBlob(blob, fileName)
                //             }
                //         }else {
                //             this.$message.error("下载失败");
                //         }
                //     }).finally(()=>{
                //         this.getAll();
                //     });
                // }).catch(()=>{
                //     // console.log(res);
                // });
            }
        }
    })
</script>
</body>
</html>